{% block regular_content %}
<div id="survey" data-cy="survey" class="flex absolute inset-0 z-50 items-center justify-center" style="background-color: #80808057;">
    <div class="bg-blue-500 border border-black rounded-lg px-8 py-4 text-center">
        <div id="description" class="text-white mb-8 text-xl">{{ _(description) }}</div>
        <form id="survey_form">
            {% for question in questions %}
                <div class="mb-4">
                    <div id="question" class="text-white mb-4 text-xl">{{ _(question) }}</div>
                    <div class="flex flex-row justify-center space-x-1">
                        <input autofocus="autofocus" id="input" data-cy="input_{{ loop.index }}" type="text" class="flex items-center border border-green-400 rounded p-2 px-3 w-4/5 mx-auto" name="{{ question }}">
                    </div>
                </div>
            {% endfor %}
            <div class="mt-4 flex flex-row gap-4 justify-center">
                <button id="submit" data-cy="submit" class="green-btn block w-40 pb-4 pt-4"
                    hx-trigger="click"
                    hx-post="/surveys/submit-survey/{{ survey_id }}"
                    hx-include="[name='question']"
                    hx-swap="innerHTML"
                    _="on click toggle .hidden on #survey
                    and window.location.reload()">
                {{_('survey_submit')}}</button>
                {% if not click %}
                    <button id="remind_later" class="red-btn block w-40 pb-4 pt-4"
                        hx-trigger="click"
                        hx-post="/surveys/remind-later-survey/{{ survey_id }}"
                        hx-swap="innerHTML"
                        _="on click toggle .hidden on #survey">
                        {{_(survey_later)}}</button>
                {% else %}
                    <button id="cancel_survey" data-cy="cancel_survey" class="red-btn block w-40 pb-4 pt-4"
                        _="on click toggle .hidden on #survey">
                        {{_('cancel')}}</button>
                {% endif %}
            </div>
            {% if not click %}
                <button id="skip" class="text-white m-1 pb-4 pt-4 underline"
                    hx-trigger="click"
                    hx-post="/surveys/skip-survey/{{ survey_id }}"
                    hx-swap="innerHTML"
                    _="on click toggle .hidden on #survey then add .hidden to #survey_status_button">
                    {{_('survey_skip')}}</button>
            {% endif %}
        </form>
    </div>
</div>
{% endblock %}

